import { Col, Input, Row, Form, Space, Button, DatePicker } from "antd"
import { UndoOutlined, SearchOutlined, UpOutlined,DownOutlined } from '@ant-design/icons';
import React from "react";
import moment from "moment";
import ZCSelect from "@/component/zc-select/zc-select";
import Zcdatepicker from "../xx-datepicker/xx-datepick";
import ZCRangePicker from "@/component/zc-rangepicker/zc-rangePicker";
import ZCCascader from "@/component/zc-cascader/zc-cascader";
import ZCTextArea from "@/component/zc-textArea/zc-textArea";
import XxtreeSelect from "@/component/zc-treeSelect/authTreeSelect";

/**
 * @description 根据type值判断是返回Input输入框还是什么
 */
const FormItemCoreEl = ({ onFinish, onChange, name, form, componenttype, useprops }) => {
    switch (componenttype) {
        // 如果是Select，则渲染select组件并且遍历Options   optionlist={optionlist}
        case "Select": return <ZCSelect {...useprops} onSelect={value => form.setFieldsValue({ state: value })} onChange={value => onChange == 'onFinish' && value ? onFinish(value) : void 0} />;
        case "DatePicker": return <Zcdatepicker {...useprops} />;
        case "RangePicker": return <ZCRangePicker {...useprops} onSelect={value => form.setFieldsValue({ state: value })} />;
        case "Cascader": return <ZCCascader {...useprops} onSelect={value => form.setFieldsValue({ state: value })} />;
        case "TextArea": return <ZCTextArea  {...useprops} onSelect={value => form.setFieldsValue({ state: value })} />;
        case "TreeSelect": return <XxtreeSelect  {...useprops} onSelect={value => form.setFieldsValue({ state: value })} />
        // 默认渲染Input组件
        default: return <Input allowClear {...useprops} />;
    }
}


/**
 * @description　生成表单中的Form.Item
 */
const FormItemElement = ({ onFinish, form, index, fields, componenttype }) => {
    // form.Item的props
    let rules = fields[index].rules
    let formItemProps = {
        key: index,
        name: fields[index].name,
        label: fields[index].label,
        rules: rules
    }

    // 针对时间的datePick特殊处理
    if (componenttype === 'DatePicker') {
        formItemProps = {
            ...formItemProps,
            getValueFromEvent: (...[, dateString]) =>
                dateString,
            getValueProps: (value) => ({
                value: value ? moment(value) : undefined
            })
        }
    }
    // 时间范围的特殊处理
    if (componenttype === "RangePicker") {
        formItemProps = {
            ...formItemProps,
            getValueFromEvent: (...[, dateArray]) => {
                return dateArray
            },
            getValueProps: (value) => {
                // console.log('getValueProps', value)
                // return ({
                //     value: value ? value : undefined
                // })
            }
        }
    }


    const coreElProps = {
        onFinish,
        onChange: fields[index].onChange,
        name: fields[index].name,
        form: form,
        componenttype: fields[index].componenttype,
        useprops: fields[index].useprops
    }

    return (
        <Form.Item
            {...formItemProps}
        >
            {FormItemCoreEl(coreElProps)}
        </Form.Item>
    )
}

/**
 * @description 生成表单中的一个个的Col元素备用
 * @param {} fields 
 */
const getColElement = (onFinish, form, fields) => {
    let ColList = []
    fields.forEach((item, index) => {
        const { componenttype = null } = item
        ColList.push(
            <Col span={8} key={index} i={index} componenttype={componenttype}>
                {
                    FormItemElement({
                        onFinish,
                        form,
                        index,
                        fields,
                        componenttype
                    })
                }
            </Col>
        )


    })
    //查询按钮
    ColList.push(<Col
        span={8}
        key={ColList.length + 1}
        style={{
            // textAlign: 'right',
        }}
    >
        <Space>
            <Button
                icon={<UndoOutlined />}
                onClick={() => {
                    form.resetFields();
                }}
            >
                重置
            </Button>
            <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
                查询
            </Button>
            {/* <Button icon={<DownOutlined />} type="link">展开</Button> */}
        </Space>

    </Col>)
    return ColList
}

/**
 * @description 生成表单中的Row元素
 */
const RowElement = ({ onFinish, form, fields }) => {
    const ColList = getColElement(onFinish, form, fields)
    return <Row gutter={24}>
        {
            ColList.map((element, key) => {
                return element
            })
        }

    </Row>
}



export {
    getColElement,
    RowElement
}